<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>{{ content }}</div>
    <div>
      <p>num：{{ num }}</p>
      <p>doubleNum：{{ doubleNum }}</p>
      <p>tenTimesNum：{{ tenTimesNum }}</p>
      <AddButton @clickAddButton="addNum" text="点击 num++"></AddButton>
      <PlainButton @clickPlainButton="resetNum" text="重置 num"></PlainButton>
      <PlainButton @clickPlainButton="setHomeViewNum" text="设置 homeViewNum"></PlainButton>
      <!-- <button @click="$emit('setHomeViewNum', num)">设置homeViewNum</button> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator'

@Component({})

export default class HelloWorld extends Vue {
  @Prop() private msg!: string
  public con = 1

  content = 'HelloWorldComponent content'
  num = 0
  tenTimesNum = 0

  addNum() {
    this.num += 1
  }
  resetNum() {
    this.num = 1
  }

  // emit
  @Emit('setHomeViewNum')
  setHomeViewNum() {
    return this.num
  }

  // 计算属性
  get doubleNum() {
    return this.num * 2
  }

  @Watch('num', { immediate: true, deep: true })
  setTenTimesNum(val: number, oldVal: number) {
    this.tenTimesNum = val * 10
  }

  created() {
    console.log('created')
    this.num += 1
  }
  mounted() {
    console.log('mounted')
    this.num += 1
  }
}
</script>

<style scoped lang="scss">
.hello {
  padding: 10px;
  border: 2px solid orange;
}
</style>
